<%@ page import="com.bullsora.kindlerss.model.Feed" %>


<r:require modules="jquery, jquery-ui"/>
<div class="fieldcontain ${hasErrors(bean: feedInstance, field: 'shortName', 'error')} required">
    <label for="shortName">
        <g:message code="feed.shortName.label" default="Short Name"/>
        <span class="required-indicator">*</span>
    </label>
    <g:textField name="shortName" maxlength="30" required="" value="${feedInstance?.shortName}"/>
</div>

<div class="fieldcontain ${hasErrors(bean: feedInstance.url, field: 'url', 'error')} required">
    <div class="ui-widget">
    <label for="url">
        <g:message code="feed.url.label" default="Url"/>
        <span class="required-indicator">*</span>
    </label>
    <g:hiddenField name="url.id" id="existingUrlId" value="${feedInstance?.url?.id}"/>
    
    <g:textField name="url.url" value="${feedInstance?.url?.url}" required="" id="url"/>
    </div>    
</div>

<r:script>
$(function() {
$("#url").autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: '${createLink(uri: '/feed/findUrls')}' ,
                    dataType: "json",
                    data: {
                        match: request.term
                    },
                    delay : 300,
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            return {
                                label: item.url,
                                value: item.url,
                                id: item.id
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                if (ui.item) {
                    $("#existingUrlId").value = ui.item.id                    
                }
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    });
</r:script>
